<template>
  <!-- 登录页面 -->
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <div class="login-box" id="_j_login_box">
            <div class="inner inner_v2 clearfix">
              <div class="inner_v2_left">
                <form id="_j_login_form" method="post">
                  <div class="form-field">
                    <input
                      v-model="username"
                      name="username"
                      type="text"
                      placeholder="您的手机号"
                      autocomplete="off"
                      data-verification-name="帐号"
                      value="13700000000"
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="form-field">
                    <input
                      v-model="password"
                      name="password"
                      type="password"
                      placeholder="您的密码"
                      autocomplete="off"
                      data-verification-name="密码"
                      class="verification[required,minSize[4],maxSize[50]]"
                      value="1111"
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="form-link">
                    <a href="javascript:;">忘记密码</a>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" type="button" @click="login">
                      登 录
                    </button>
                  </div>
                </form>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                    <a href="javascript:;" class="qq"><i></i>QQ</a>
                    <a href="javascript:;" class="weixin"><i></i>微信</a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../assets/images/qrcode.jpg" />
                <p>扫一扫<br />下载骡窝窝APP</p>
              </div>
            </div>
            <div class="bottom-link">
              还没有帐号? <router-link to="/regist">马上注册</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullscreen-bg fullscreen-bg-img">
      <img
        src="../assets/images/34.jpg"
        style="width: auto; height: 657px; margin-top: -213px"
      />
    </div>
  </div>
</template>

<script>
import "../assets/css/login.css";
import { ApiLogin } from "../request/api";
export default {
  data() {
    return {
      username: "13700000000",
      password: "1111",
    };
  },
  methods: {
    async login() {
      if (!this.username.trim() || !this.password.trim()) {
        alert("账号密码不能为空！");
        return;
      }
      let res = await ApiLogin({
        username: this.username,
        password: this.password,
      });

      if (res.data.code !== 200) {
        alert("账号密码错误，请重新输入！");
        return;
      }
      //本地浏览器存登录凭证
      localStorage.setItem("token", res.data.data.token);
      //仓库存登录凭证
      this.$store.state.loginToken = res.data.data.token;
      //跳转首页
      this.$router.push("/");
      //修改登录状态
      this.$store.state.loginShow = true;
    },
  },
   watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal == "/login") {
          //存头部隐藏值
          this.$store.state.loginShow = false;
        } else {
          //存头部隐藏值
          this.$store.state.loginShow = true;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.fullscreen-bg-img {
  background-image: url(../assets/images/34.jpg);
}
</style>
